<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../common/init.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<jsp:include page="../common/meta.jsp" flush="true"/>
	<jsp:include page="../common/style.jsp" flush="true"/>
	
	<%-- <jsp:include page="../common/mapScript.jsp" flush="true"/> --%>

	
<title>全国降雨侵蚀力分析</title>
</head>

<body class="mainBody" style="overflow:hidden; ">
    
	<div class="divMap" style="width:100%; height:100%;"> <!-- 1300px -->
			<div class="daohang" ><!-- 左边导航区 -->
				<!-- 添加左侧列表 -->
				<%-- <iframe style="width:250px;height:1300px;" src="<%=modulesPath %>core/leftNavbar.jsp" frameborder="0" class="leftMapMenu"></iframe> --%>
				<div>
					<div class="navBar">
						<div class="chooseBut">
						<input type="button" id="rain"  value="雨量站" onclick="switchCollection()" class="open" />
						<input type="button" id="rain2" value="调查单元" onclick="switchInvesUnit()" class="close" />
						<input type="button" id="rain3" value="侵蚀因子" onclick="switchFactor()" class="close" />
						<input type="button" id="rain4" value="侵蚀强度" onclick="switchIntensity()" class="close" />
						</div>
						<div id="data" class="demo">						
			
			<div id="aaa">
			<label class="portlert-form-label">省：</label>
			<div class="portlert-form-collection">
				<select class="prov" id="cmbProvince" name="cmbProvince" size="1"  style="width:220px" onchange="selectDist();changeProvSelect()">						
						<option value="">--请选择--</option>																		
						
				</select>				
			</div>
						
			<div id="dist" style="display:none">
			<label class="portlert-form-label">县：</label>
			<div class="portlert-form-collection">
				<select class="dist" id="cmbDist" name="cmbDist" size="1" style="width:220px" onchange="selectUnit();changeDistSelect()">
						<option value="" >--请选择--</option>					
					</select>				
			</div>
			</div>
			<div id="unit" style="display:none">
			<label class="portlert-form-label">单元：</label>
			<div ><!-- class="portlert-form-collection" -->
				<select class="unit" id="cmbUnit" name="cmbUnit"  multiple="true" style="width:220px" onchange="changUnitSelect()"  >
						<option value="">--请选择--</option>					
					</select>				
			</div>
			</div>
			</div>	
			<div id="factor" style="display:none">
			<label class="portlert-form-label">因子和强度：</label>
			<div class="portlert-form-collection">
				<select id="factorSelect" name="factorSelect"   size="1"  class="portlert-form-input-field" style="width:220px">
						<option value=''>请选择</option>
					</select>				
			</div>	
			</div>
			
			<br>										
				<input type="button" value="确定" onclick="redirectMap()" class="close" style="width:220px"/>
						</div>
					</div>
				</div>
				</div>
				
			 <div class="content" id="activity_pane"><!-- 右边大地图区域 -->
				<div style=" width:100%; height:100%" id="container1">
					
				</div>
				<div id="tip" style="top:120px;">当前选择：<br><span id="info"></span></div>
			</div>
    </div>

   
	<!--引入提示告警和确认  -->
	<%@ include file="../common/alert_dialog.jsp" %>
	<%@ include file="../common/confirm_dialog.jsp" %>
	<jsp:include page="../common/script.jsp" flush="true"/>
	<script type="text/javascript" src="<%=templatePath%>js/multipleSelect/jquery.multiselect.js" charset="UTF-8"></script>
	<script type="text/javascript" src="<%=templatePath%>js/multipleSelect/jquery.multiselect.filter.js" charset="UTF-8"></script>
	<script type="text/javascript" src="<%=templatePath%>js/multipleSelect/jquery.ui.core.js" charset="UTF-8"></script>
	<script type="text/javascript" src="<%=templatePath%>js/multipleSelect/jquery.ui.widget.js" charset="UTF-8"></script>


	<link rel="stylesheet" type="text/css" href="<%=templatePath%>js/multipleSelect/jquery.multiselect.css"/>
	<link rel="stylesheet" type="text/css" href="<%=templatePath%>js/multipleSelect/jquery.multiselect.filter.css"/> 
	<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
	
	<link rel="stylesheet" href="<%=templatePath%>/css/common/select2.css">
	<script type="text/javascript" src="<%=templatePath%>/js/common/select2.js"></script>
	<script type="text/javascript" src="<%=templatePath%>/js/common/zh-CN.js"></script>
	<%-- <link rel="stylesheet" type="text/css" href="<%=themesPath%>js/multipleSelect/jquery.multiselect.css"/> --%>
	<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    
    <script src="http://webapi.amap.com/maps?v=1.3&key=fec15edac42982a16aadcb4224d53cc9&plugin=AMap.MapType,AMap.Geocoder"></script>  <!-- 引入高德地图和所需插件 -->
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script type="text/javascript" src = 'http://cache.amap.com/lbs/static/allCity.js'></script> 
    <script type="text/javascript" src="<%=templatePath %>js/map/main_map.js"></script>
    <script type="text/javascript" src="<%=templatePath %>js/map/jqueryautocomplete/jquery.cityselect1.js"></script>
    <script type="text/javascript" src="<%=templatePath %>js/map/changeFactorSelect.js"></script>
	
	


<script type="text/javascript">
	 $(function() {
		//注册表单验证
		$(":input").bind("focus",function(){
			$(".tip").empty();
		});
		$("#loginForm").validate({
			rules : {
				username : {required:true,maxlength:30,byteRangeLength:[0,30]},
				password : {required:true,maxlength:15},
			},
			errorPlacement : function(error, element) { //指定错误信息位置
					if(element.parent().next().children().filter("span").text()!="") element.parent().next().children().filter("span").text('');
				    error.appendTo(element.parent().next().children().filter("span"));
			}
		});
	}); 
	</script>
	
	<script type="text/javascript">
	
	
	var farmid = 'rainfirst';
	console.log(farmid);
	
		
		$(function(){
			$(".chooseBut input").on("click",function(){
				$(this).css("color","red");
				$("#"+farmid).css("color","black");
				farmid = $(this).attr("id");
			});
		});
	$(function(){
		
		 var cityArray={"11":"北京市","12":"天津市","13":"河北省","14":"山西省",
		               "15":"内蒙古自治区",
		               "21":"辽宁省","22":"吉林省",
		               "23":"黑龙江省",		               
		               "31":"上海市","32":"江苏省","33":"浙江省","34":"安徽省",
		               "35":"福建省","36":"江西省","37":"山东省","41":"河南省",
		               "42":"湖北省","43":"湖南省","44":"广东省","45":"广西壮族自治区",
		               "46":"海南省","50":"重庆市","51":"四川","52":"贵州省",
		               "53":"云南省","54":"西藏自治区","61":"陕西省","62":"甘肃省",
		               "63":"青海省","64":"宁夏回族自治区","65":"新疆维吾尔自治区","0":"新疆建设兵团"	
		}; 
		var selectObj= $("#cmbProvince");
		for(var key in cityArray){
			
			selectObj.get(0).add(new Option(cityArray[key],key, false, false));
			
			
		}			
	});
	//选择市县单位
		function selectDist(){
			$("#cmbUnit").val("");
			//$("#cmbUnit option:not(:first)").remove();
			var province=$("#cmbProvince option:selected").text();
			
			$.post(global_context+"/MainMap/MainMap/getDistList.do",{province:province},function(data){
				//alert(JSON.stringify(data));
				
				var saitiid = data;
				var selectObj1= $("#cmbDist");				
				$("#cmbDist option:not(:first)").remove();
				for(var key in data){
					selectObj1.get(0).add(new Option(data[key],key, false, false));
				}
				
			});
		}
	    $(function(){  
	        $("#cmbUnit").multiselect({  
	            noneSelectedText: "--请选择--",  
	            checkAllText: "全选",  
	            uncheckAllText : '全不选',  
	            selectedList:4  
	        }); 
	    });  
		//选择调查单元
		function selectUnit(){
			//$("#cmbUnit").multiselect();
			var province=$("#cmbProvince").val();
			var dist=$("#cmbDist option:selected").text();
			$.post(global_context+"/MainMap/MainMap/getUnitList.do",{dist:dist},function(data){
				//alert(JSON.stringify(data));
				
				var saitiid = data;
				var selectObj1= $("#cmbUnit");				
				$("#cmbUnit option:not(:first)").remove();
				for(var i = 0; i < saitiid.length; i++)
				{
					selectObj1.get(0).add(new Option(saitiid[i],saitiid[i] , false, false));
					$("#cmbUnit").multiselect("refresh"); 
				}
			});
			
		}
	</script>
	<script>
	//选择提示
		$('#cmbProvince').select2();
		$('#cmbDist').select2();
		//$('#cmbUnit').select2();
	</script>
</body>
</html>
